<template>
  <div class="login">
    <div id="logins">
      <div class="logins-top">
        <img class="logo" src="../images/logo.png" alt="">
        <span>CSO管理系统</span>
      </div>
      <div class="logins-s logins-b">
        <img src="../images/peo.png" alt="">
        <input type="text" v-model.trim="account" @keyup.enter="login()" placeholder="请输入登录账号">
      </div>
      <div class="logins-s logins-b">
        <img src="../images/pas.png" alt="">
        <input type="password" v-model.trim="password" @keyup.enter="login()" placeholder="请输入您的密码">
      </div>
      <div class="logins-s" v-show="inputCodes">
        <div class="fl scan logins-b">
          <img src="../images/ema.png" alt="">
          <input type="text" v-model.trim="code" id="inputCode" @keyup.enter="login()" placeholder="请输入您的验证码">
        </div>
        <div class="fr scans logins-b mycode" id="code">
          <img :src=codeUrl alt="" @click="getCodes()">
        </div>
      </div>
      <div class="logins-s logins-ss">
        <el-row>
          <el-button id='submit' @click="login()">登录</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";
import authApi from "@/api/auth";
export default {
  data() {
    return {
      account: "",
      password: "",
      code: "",
      checked: true,
      inputCodes: false, //是否显示验证码
      codeUrl: ""
    };
  },
  methods: {
    login() {
      if (this.account == "") {
        this.$message({
          showClose: true,
          message: "请输入账号",
          type: "error"
        });
        return false;
      }
      if (this.password == "") {
        this.$message({
          showClose: true,
          message: "请输入密码",
          type: "error"
        });
        return false;
      }
      if (this.inputCodes) {
        if (this.code == "") {
          this.$message({
            showClose: true,
            message: "请输入验证码",
            type: "error"
          });
          return false;
        }
      }
      const options = {
        username: this.account,
        password: md5(this.password),
        captcha: this.code
      };
      authApi.signIn(options).then(res => {
        if (res.code == 1) {
          this.$store.commit("setAccesstoken", res.data.token);
          localStorage.setItem("token", res.data.token);
          this.$router.push("/userExamine");
        } else if (res.code == -3) {
          this.inputCodes = true;
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error"
          });
          this.getCodes();
        }
      });
    },
    getCodes() {
      const urlCode = authApi.getCode(this.account);
      this.codeUrl = urlCode + "?" + Math.random();
    }
  },
  mounted() {}
};
</script>
<style lang="less">
@import "login.less";
</style>

